<template>
    <a-form-model
        :model="securityFrom"
        :rules="securityRule"
        class="security-from"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 16 }"
        ref="securityFrom"
    >
        <a-form-model-item prop="email" label="用户邮箱">
            <a-input v-model="accountInfo.email" disabled placeholder="请输入邮箱地址" />
        </a-form-model-item>
        <a-form-model-item prop="verifycode" label="验证码">
            <div class="flex-row">
                <a-input v-model="securityFrom.verifycode" placeholder="请输入验证码"/>
                <a-button style="margin-left:10px;" type="primary" @click.prevent="getEmailCode" :loading="codeLoading">获取验证码</a-button>
            </div>
        </a-form-model-item>
        <a-form-model-item prop="newpassword" label="新密码">
            <a-input-password ref="password" v-model="securityFrom.newpassword" placeholder="请输入新密码" />
        </a-form-model-item>
        <a-form-model-item prop="againPassword" label="确认密码">
            <a-input-password ref="password" v-model="securityFrom.againPassword" placeholder="请输入确认密码" />
        </a-form-model-item>
        <a-form-item style="margin-left:105px;">
            <a-button type="primary" @click="updateValue" :loading="loading"> 修改密码 </a-button>
        </a-form-item>
    </a-form-model>
</template>

<script>
import { mapState } from 'vuex';
import { updateUserPwd } from '@/api/user';
import { getCache } from '@/utils/session';
import {
    remoteEmailCode,
    resetUserPassword
} from '@/api/system/user'

export default {
    name: 'securitySetting',
    data() {
        var validatePwd = (rule, value, callback) => {
            if (value === '') {
              callback(new Error('请再次输入密码'));
            } else if (value !== this.securityFrom.newpassword) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
        };
        return {
            loading: false,
            securityFrom: {
                verifycode:'',
                newpassword: '',
                againPassword: ''
            },
            codeLoading:false,
            securityRule: {
                newpassword: [{ required: true, message: '请输入密码', trigger: 'blur' }],
                againPassword: [{ required: true, validator:validatePwd, trigger: 'blur' }],
                verifycode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
                // email: [
                //     { required: true, message: '请输入邮箱', trigger: 'blur' },
                //     { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱地址' }
                // ]
            }
        };
    },
    computed: {
        ...mapState({
            accountInfo: state => state.user.accountInfo
        })
    },
    methods: {
        updateValue() {
            this.$refs.securityFrom.validate(async valid => {
                if (valid) {
                    try {
                        this.loading = true;
                        let {verifycode,newpassword} = this.securityFrom;
                        await resetUserPassword(verifycode,newpassword);
                        this.$message.success('修改成功！');
                        await this.$store.dispatch('user/logout',false);
                        let tenant = getCache('tenant') || 'master';
                        this.$router.replace({
                            path: `/${tenant}/login`
                        });
                    } finally {
                        this.loading = false;
                    }
                }
            });
        },
        //获取邮箱验证码
        async getEmailCode(){
            try{
                this.codeLoading = true;
                let {email} = this.accountInfo;
                let res = await remoteEmailCode(email);
                this.$message.success('验证码已发送至邮箱！');
            }finally{
                this.codeLoading = false;
            }
        }
    }
};
</script>
